<template>
  <div class="search-container">
     <header>
          <div tag="div"  class='header-ipt' >  <span class="yo-ico">&#xe643;</span> 
          <input @input="handleinput" v-model="message" type="text" placeholder="搜索明星、演出比赛、场馆">
    </div>
    <div class='header-right'>
      <span @click="toclick">取消</span>
     </div>
     </header>
     <main>
        <div v-if="flag" class="history">
           <p>搜索历史</p>
           <ul>
              <li 
              v-for="(li,index) in historylist"
              :key="index+li"
              >{{li}}</li>
           </ul>
        </div>

      <div  class="more-item">
      <ul>
         <router-link  v-for="value in list" 
          :key='value.id' 
          :data-id="value.id"
          tag="li" 
          :to="`/detail/${value.id}`"
         >
          <div>
           <img :src="value.verticalPic" alt="">  
             </div> 
             <div>
                <h3>{{value.nameNoHtml}}</h3>
                <p> {{value.venuecity}} / {{value.showtime}} / {{value.venue}}</p>
                <h4>{{value.price_str}}</h4>     
                </div> 
         </router-link>         
      </ul> 
   </div> 
     </main>
  </div>
</template>

<script>
import Vue from 'vue'
import {get} from  '../utils/http.js'  
import _ from 'lodash'
import BScroll from 'better-scroll'
import { Loading,Toast } from 'vant';
import store from 'store'
Vue.use(Loading);
export default {
  data () {
     return {
        message:'',
        list:[],
        historylist:[],
        flag:true
     }
  },
  methods: {
     toclick(){
       this.$router.push('/home')
     },
   handleinput:_.debounce(async function(){
       
        let result = await get({
      url: `https://search.damai.cn/searchajax.html?keyword=${this.message}&cty=&ctl=&sctl=&tsg=0&st=&et=&order=1&pageSize=30&currPage=1&tn=`,    
    })
     if(this.message==""){ 
        this.list=""
      }else{
         this.list=result.data.pageData.resultData
            this.flag=false 
      }
                
             
    },500)
 },
 mounted () { 
    if(this.list){
    let bScroll = new BScroll('.more-item', {
      pullUpLoad: true,
      click: true,
      probeType: 2
    })
 }
  }
}
</script>

<style lang="stylus" scoped>
.search-container
   height 100%
   width 100%
   background white
   header 
         display flex
         flex-direction row
         align-items center
         justify-content space-between
         height 1rem
         width 100%
         padding-left  0.45rem
         background white
         .header-ipt
            display flex
            width 82%
            height 0.54rem
            align-items center
            font-size 0.28rem
            background #f2f3f4!important
            border 1px solid white 
            border-radius 0.3rem
            padding 0 0 0 0.36rem
            background white
            color #999999
            padding-right 0.36rem
         >span:first-child
            font-size 0.5rem
            padding-right 0.3rem
         input 
            border 0
            width 100%  
            font-size 0.24rem
            color #AAA
            background #f2f3f4!important
         .header-right
            display flex
            align-items center
            font-size 0.28rem
            padding-right 0.32rem 
   main
     height 100%
     width  100%
     padding 0.18rem 0.36rem 0
     .history
      p 
       color #999
       font-size 0.24rem
      ul
       display flex
       margin-top 0.2rem
       li
         border 1px solid #aaaaaa 
         border-radius 0.3rem
         font-size 0.24rem
         color #222
         height 0.5rem
         line-height 0.5rem
         padding 0 0.2rem 0

     .more-item
          width 100%
          overflow hidden
          height 100%
          background white
          ul
           width 100%
           overflow hidden
           li
            display flex
            flex-direction row 
            height 2.4rem
            width 100%
            margin-top 0.4rem
            >div:first-child
               font-size 0
               height 0
               padding-bottom  1.3296%              
               img 
                width 1.82rem
                height 2.4rem
            >div:last-child
               position relative
               padding-left 0.24rem
               width 100%
               h3
                font-size 0.32rem
                width 90%            
               p
                overflow hidden              
                width  90%
                font-size 0.24rem
                color #aaaaaa
                padding-top 0.12rem         
                text-overflow ellipsis
                white-space nowrap
               h4
                font-size 0.28rem
                color #ff1268
                position absolute
                bottom 0.1rem      

      
</style>